package org.example.project.search.ui

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
 * 搜索发现卡片
 */
@OptIn(ExperimentalLayoutApi::class)
@Composable
fun SearchFoundCard(
    founds: List<String>,
    tipClick: (title: String) -> Unit,
    modifier: Modifier = Modifier
) {
    var isShowMultipleLines by remember { mutableStateOf(false) }

    Column(
        modifier.fillMaxWidth()
            .padding(top = 8.dp)
            .background(
                color = Color.White, shape = RoundedCornerShape(16.dp)
            ) // 设置背景色和圆角形状
            .padding(start = 12.dp, top = 8.dp, end = 12.dp, bottom = 8.dp),
    ) {
        Text("搜索发现", fontSize = 15.sp, fontWeight = FontWeight.W500)
        FlowRow(
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.padding(top = 4.dp, bottom = 4.dp)
        ) {
            founds.forEachIndexed { index, title ->
                if (!isShowMultipleLines && index >= 5) {
                    return@forEachIndexed
                }
                Box(
                    modifier = Modifier.padding(top = 8.dp)
                        .background(Color(0x08000000), shape = RoundedCornerShape(16.dp))
                        .clip(shape = RoundedCornerShape(16.dp))
                        .clickable { tipClick(title) }
                        .padding(start = 12.dp, end = 12.dp, top = 6.dp, bottom = 6.dp)
                ) {
                    Text(title, fontSize = 14.sp, fontWeight = FontWeight.W400)
                }
            }

            Box(
                modifier = Modifier.padding(top = 8.dp)
                    .background(Color(0x08000000), shape = RoundedCornerShape(16.dp))
                    .padding(8.dp)
            ) {
                Img(14.dp, { isShowMultipleLines = !isShowMultipleLines })
            }
        }
    }
}